{% extends "based/based.html" %}
{% block title %}{{_("图片展示")}}-{% endblock %}
{% block content %}

<data id="cid" content="{{data.cid}}"></data>
<div v-cloak id="app" >
    <div class="row">
            <div class="col-xs-12">
                <div class="panel">
                    <header class="panel-heading">
                        <i class="fa fa-image"></i>
                        <strong>
                            {{_("图文|图库")}}(<span class="osr-color-success">{{_("结果")}}{[medias.data_total]}</span>)
                            <span class="osr-color-secondary">[{{_("当前设置主题")}}: {[theme_name]}]</span>
                        </strong>
                    </header>
                    <div class="panel-body table-responsive">
                        {% include 'theme-setting/display/_bar.html' %}
                         <!-- 上传-->
                        <div id="upload-html" hidden>
                            {% include 'module/upload.html' %}
                        </div>
                        <!-- //上传-->
                        <div id="galley" class="docs-pictures clearfix">
                            <div  v-for="(media, index) in medias.datas" class="osr-img-list col-lg-3 col-md-4 col-sm-6 col-xs-12">
                                <span class="osr-img-tag-media">
                                  <span  v-if="media.category" class="badge badge-info">
                                      {[media.category]}
                                  </span>
                                  <span  v-else class="badge badge-info text-danger">
                                      {{_("未分类")}}
                                  </span>
                                </span>

                                <img class="osr-media-img" :src="media.url+img_w_h" :alt="media.title"
                                     :data-original="media.url" v-on:click="init_viewer()">

                                 <div v-if="media.title && media.title!=null" class="img-title osr-text-overleft"  data-toggle="tooltip" :title="media.title">
                                     {[media.title]}
                                 </div>
                                <div v-else class="img-title">&nbsp;</div>
                                 <div class="osr-text-overleft" data-toggle="tooltip" :title="media.name">
                                    {[media.name]}
                                </div>

                                <div class="inline">
                                     <div class="checkbox checkbox-success">
                                           <input :id="media._id" type="checkbox"  v-bind:value="media._id" unchecked>
                                           <label :for="media._id"></label>
                                           <a class="pull-right" :href="'/osr-admin/theme-setting/display/image-edit?theme='+current_theme_name+'&cid='+curren_category+'&id='+media._id+'&fp='+page">
                                            <i class="fa fa-edit"></i>{{_("编辑|详情")}}
                                           </a>
                                      </div>
                                </div>
                                <span class="osr-date">
                                    <span v-if="media.inform" class="fa fa-warning osr-color-danger osr-pointer"
                                            v-on:click="put_media_view(media.inform)" data-toggle="modal" data-target="#inform-info">
                                          {[media.inform.total]}
                                    </span>
                                    &nbsp;
                                    {[media.time | formatDate]}{{_("上传")}}
                                </span>
                                <hr>
                            </div>

                        </div>
                    </div>
                {% include 'theme-setting/display/_paging.html' %}
            </div>
        </div>
    </div>
    {% include 'theme-setting/display/_inform_modal.html' %}
</div>
<script src="/admin-pages/static/js/image/viewer.min.js?v={{g.site_global.site_config.STATIC_FILE_VERSION}}"></script>
<script src="/admin-pages/static/js/image/jquery-viewer.min.js?v={{g.site_global.site_config.STATIC_FILE_VERSION}}"></script>
<link href="/admin-pages/static/css/image/viewer.min.css?v={{g.site_global.site_config.STATIC_FILE_VERSION}}" rel="stylesheet" type="text/css" />

<script>

    var vue = new Vue({
      el: '#app',
      delimiters:['{[', ']}'],
      data:{
          media_type:"image",
          medias:{},
          theme_name:"",
          page:1,
          media_view:{},
          media_edit:{},
          media_categorys:[],
          curren_category:"",
          current_theme_name:null,
          theme_names:[],
          start_upload:false,
          checkAll:false, set:false,
          keyword:"",
          img_w_h:"?w=0&h=140",
          pages:{},
          sort:"",
          inform:{}
      },
      filters: {
            formatDate: function (time) {
              return irrformatDate(time, "yyyy-MM-dd hh:mm");
            }
      }
    })

    //文件上传配置
    function uploader_conf(data){
        data["theme_name"] = vue.current_theme_name;
        var conf = {
            pick: {
                id: '#filePicker',
                label: '{{_("点击选择图片")}}'
            },
            formData:data,
            fileVal: "upfile",
            dnd: '#dndArea',
            paste: '#uploader',
            swf: '../../dist/Uploader.swf',
            chunked: false,
            chunkSize: 512 * 1024,
            server: "/api/admin/theme/display-setting",
            // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
            disableGlobalDnd: true,
            fileNumLimit: 100,
            fileSizeLimit:200 * 1024 * 1024,    // 200 M
            fileSingleSizeLimit:10 * 1024 * 1024    // 10 M
        }
        return conf;
    }

    //初始化图片查看器
    var is_init_viewer = false;
    function init_viewer(id) {
        id = id?id:"galley";
        if(!is_init_viewer){
            var $images = $('#'+id);
            $images.on({}).viewer({
                url: 'data-original',
                interval:1500
            });
            is_init_viewer = true;
        }
        $('#'+id).on({}).viewer('update');
    }


</script>
{% include 'theme-setting/display/_script.html' %}

{% endblock %}